<template>
  <div class="add-roast-container">
    <div class="header">
      <h2>发布吐槽</h2>
    </div>
    
    <el-form 
      ref="roastForm" 
      :model="roastForm" 
      :rules="rules" 
      label-width="80px" 
      class="roast-form"
    >
      <el-form-item label="标题" prop="title">
        <el-input 
          v-model="roastForm.title" 
          placeholder="请输入吐槽标题"
        />
      </el-form-item>
      
      <el-form-item label="内容" prop="content">
        <el-input
          v-model="roastForm.content"
          type="textarea"
          :rows="6"
          placeholder="请输入吐槽内容"
        />
      </el-form-item>
      
      <el-form-item label="分类" prop="category">
        <el-select 
          v-model="roastForm.category" 
          placeholder="请选择分类"
          style="width: 100%"
        >
          <el-option label="工作环境" value="工作环境" />
          <el-option label="薪资福利" value="薪资福利" />
          <el-option label="管理制度" value="管理制度" />
          <el-option label="人际关系" value="人际关系" />
          <el-option label="职业发展" value="职业发展" />
          <el-option label="其他" value="其他" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="公司" prop="company_id">
        <el-select 
          v-model="roastForm.company_id" 
          placeholder="请选择公司"
          style="width: 100%"
          filterable
        >
          <el-option
            v-for="company in companies"
            :key="company.id"
            :label="company.name"
            :value="company.id"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="自定义标签">
        <el-select
          v-model="roastForm.custom_tags"
          multiple
          filterable
          allow-create
          default-first-option
          placeholder="请输入自定义标签，回车确认"
          style="width: 100%"
        >
          <el-option
            v-for="item in predefinedTags"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="匿名发布" prop="is_anonymous">
        <el-switch v-model="roastForm.is_anonymous" />
        <span class="anonymous-tip">开启后将匿名发布吐槽</span>
      </el-form-item>
      
      <el-form-item>
        <el-button 
          type="primary" 
          @click="submitTestData" 
          :loading="submitLoading"
        >
          发布
        </el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { RoastApi } from '@/utils/api'
import { CampatydataApi } from '@/utils/api'

export default {
  name: 'AddRoast',
  data() {
    return {
      submitLoading: false,
      companies: [],
      roastForm: {
        title: '',
        content: '',
        is_anonymous: false,
        category: '',
        company_id: '',
        custom_tags: []
      },
      predefinedTags: [
        { label: '加班严重', value: '加班严重' },
        { label: '工资拖欠', value: '工资拖欠' },
        { label: '管理混乱', value: '管理混乱' },
        { label: '勾心斗角', value: '勾心斗角' },
        { label: '形式主义', value: '形式主义' },
        { label: '官僚主义', value: '官僚主义' }
      ],
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { min: 10, message: '内容至少 10 个字符', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '请选择分类', trigger: 'change' }
        ],
        company_id: [
          { required: true, message: '请选择公司', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.fetchCompanies()
  },
  methods: {
    async fetchCompanies() {
      try {
        const response = await CampatydataApi.getCampatyDataList()
        // 根据实际返回结构调整
        if (Array.isArray(response)) {
          this.companies = response
        } else if (response.data) {
          this.companies = response.data.items || response.data
        } else {
          this.companies = response.items || response
        }
      } catch (error) {
        console.error('获取公司列表失败:', error)
        this.$message.error('获取公司列表失败')
      }
    },
    
    async submitTestData() {
      this.submitLoading = true
      try {
        // 直接使用固定的测试数据
        const testData = {
          title: "吐槽test",
          content: "吐槽test",
          is_anonymous: false,
          category: "工资",
          company_id: "451d6b9a-d528-4664-af93-487dc3855ae4",
          custom_tags: ["加班", "工资拖欠"]
        }
        
        await RoastApi.submitRoast(testData)
        this.$message.success('发布成功')
        this.$router.push('/roastlist')
      } catch (error) {
        console.error('发布失败:', error)
        // 显示更详细的错误信息
        let errorMsg = '发布失败'
        if (error.response && error.response.data && error.response.data.detail) {
          errorMsg += ': ' + error.response.data.detail
        } else if (error.message) {
          errorMsg += ': ' + error.message
        }
        this.$message.error(errorMsg)
      } finally {
        this.submitLoading = false
      }
    },
    
    resetForm() {
      this.$refs.roastForm.resetFields()
    }
  }
}
</script>

<style scoped>
.add-roast-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h2 {
  color: #333;
  margin: 0;
}

.roast-form {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.anonymous-tip {
  margin-left: 10px;
  color: #999;
  font-size: 12px;
}
</style>